<script lang="ts">
import userNavi from '@/components/userNavi.vue'
import {ref, onMounted} from 'vue'
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  components:{
    'navi': userNavi
  },
  setup() {
    const page = ref(1)
    const size = ref('')
    const list = ref([])
    const total = ref('')
    const value = ref('')
    const type=ref([])
    const params = ref({
      page: 1,
      size: 4
    })
    onMounted(() => {
      getType()
      pagehelper()
    })
    const pagehelper = async () => {
      const res = await request.get(`/product/${params.value.page}/${params.value.size},${value.value}`)
      console.log("分页页面")
      console.log(res.data)
      console.log("分页后")
      list.value= res.data.data.records
      console.log(list.value)
      total.value =res.data.data.total
      console.log(total.value)
    }
    const handleSizeChange = (val: number) => {
      console.log(`每页 ${val} 条`)
      params.value.size = val
      pagehelper()
    }

    const handleCurrentChange = (val: number) => {
      console.log(`当前页: ${val}`)
      params.value.page = val
      pagehelper()
    }

    const getType=async()=>{
      const res =await request.get("/findType")
      type.value=res.data.data
      console.log(type)
      console.log(type.value)
    }
    // const load = () =>{
    //   request.get(`/product/${params.value.page}/${params.value.size}`,{
    //   }).then(res=>{
    //     console.log(res)
    //     list.value = res.data.records
    //     console.log(list.value)
    //     total.value = res.data.total
    //   })
    // }
    const filterData= () => {
      pagehelper()
    }


    return {
      page,
      size,
      list,
      total,
      params,
      handleSizeChange,
      handleCurrentChange,
      pagehelper,
      type,
      value,
      filterData
    }
  }

}
</script>

<template>

  <div>
    <navi class="navi"></navi>
  </div>
  <div>
    <el-carousel :interval="4000" type="card" height="250px">
      <el-carousel-item>
        <img class="banner" src="https://pic3.zhimg.com/v2-4a68b63e7bda37ffbd3dffd0a43ebeaa_r.jpg">
      </el-carousel-item>
      <el-carousel-item>
        <img class="banner" src="https://th.bing.com/th/id/OIP.BOl9baBAmb7cYxXEG77hTgHaE8?w=277&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7">
      </el-carousel-item>
      <el-carousel-item>
        <img class="banner" src="https://th.bing.com/th/id/OIP.dT05Q56-SqBWGwfYHiwBoAHaFS?w=256&h=183&c=7&r=0&o=5&dpr=1.3&pid=1.7">
      </el-carousel-item>
    </el-carousel>
  </div>

  <div>
    分类:
    <el-select v-model="value" clearable placeholder="全部" @change="filterData">
      <el-option
          v-for="item in type"
          :key="item.value"
          :label="item.value"
          :value="item"
      />
    </el-select>
  </div>


  <el-row class="row">
    <el-col
        v-for="(item, index) in list"
        :span="4"
        :offset="index === 0 ? 1 : 2"
    >
      <el-card :body-style="{ padding: '0px' }">
        <router-link :to="{path:`goods/${item.proId}`,params:{item}}"  class="card">
        <img
            :src="item.proImg"
            class="image"
        />
        <div style="padding: 14px">
          <span>{{ item.proName }}</span>
          <br>
          <span style="color:red">{{ item.proPrice}}￥</span>
        </div>
        </router-link>
      </el-card>
    </el-col>
  </el-row>




    <el-pagination class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.params.page"
        :page-sizes="4"
        :page-size="this.params.size"
        layout="prev, pager, next, jumper"
        :total="this.total">
    </el-pagination>

</template>>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.banner{
  width: 100%;
}
.el-carousel{
  width:1400px;
  margin:auto
}
.image {
  width: 100%;
  height: 220px;
  display: block;
}
.row{
  width:1400px;
  margin:auto
}
.page{
  margin-top: 30px;
  justify-content: center;
}
.navi{
  width: 1400px;
}
.card:link{
  text-decoration: none;
}
.card:hover{
  color:blue;
}
</style>